<template>
    <div>
        <!-- 技术解释区域 -->
        <div style="background-color: #e8f5e8; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #4CAF50;">
            <h3 style="color: #2E7D32; margin-top: 0;">🔄 技术解释：动态样式绑定</h3>
            <p><strong>条件绑定：</strong>使用三元运算符 <code>condition ? 'class1' : 'class2'</code> 根据条件动态切换样式。</p>
            <p><strong>数组语法：</strong>使用 <code>[condition ? 'class' : '', 'static-class']</code> 组合条件类和静态类。</p>
            <p><strong>响应式更新：</strong>当数据变化时，Vue会自动更新DOM中的class和style属性。</p>
            <p><strong>性能优化：</strong>Vue会智能地只更新发生变化的样式属性，避免不必要的DOM操作。</p>
        </div>

        <!-- 交互演示区域 -->
        <div style="background-color: #f5f5f5; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
            <h3>动态样式绑定演示</h3>
            
            <!-- 控制面板 -->
            <div style="margin-bottom: 20px; padding: 15px; background-color: white; border-radius: 4px; border: 1px solid #ddd;">
                <div style="margin-bottom: 10px;">
                    <label style="display: inline-block; width: 120px;">激活状态：</label>
                    <button @click="toggleActive" :style="{ backgroundColor: isActive ? '#4CAF50' : '#f44336', color: 'white', padding: '5px 15px', border: 'none', borderRadius: '4px', cursor: 'pointer' }">
                        {{ isActive ? '已激活' : '未激活' }}
                    </button>
                </div>
                
                <div style="margin-bottom: 10px;">
                    <label style="display: inline-block; width: 120px;">错误状态：</label>
                    <button @click="toggleError" :style="{ backgroundColor: hasError ? '#f44336' : '#9E9E9E', color: 'white', padding: '5px 15px', border: 'none', borderRadius: '4px', cursor: 'pointer' }">
                        {{ hasError ? '有错误' : '无错误' }}
                    </button>
                </div>
                
                <div style="margin-bottom: 10px;">
                    <label style="display: inline-block; width: 120px;">字体大小：</label>
                    <input v-model.number="fontSize" type="range" min="12" max="36" style="margin-right: 10px;">
                    <span>{{ fontSize }}px</span>
                </div>
                
                <div>
                    <label style="display: inline-block; width: 120px;">主题模式：</label>
                    <select v-model="theme" style="padding: 5px; border: 1px solid #ddd; border-radius: 4px;">
                        <option value="light">浅色主题</option>
                        <option value="dark">深色主题</option>
                        <option value="colorful">彩色主题</option>
                    </select>
                </div>
            </div>

            <!-- 示例展示 -->
            <div style="border: 1px solid #ddd; padding: 15px; border-radius: 4px; background-color: white;">
                <div style="margin-bottom: 15px;">
                    <strong>1. 动态Class绑定：</strong>
                    <div :class="[isActive ? 'active' : '', hasError ? 'error' : '', theme]" style="margin-top: 5px; padding: 15px; border-radius: 4px; transition: all 0.3s ease;">
                        动态class绑定演示 - 状态会根据控制面板变化
                    </div>
                </div>
                
                <div style="margin-bottom: 15px;">
                    <strong>2. 动态Style绑定：</strong>
                    <div :style="{ 
                        color: isActive ? 'green' : 'red', 
                        fontSize: fontSize + 'px',
                        backgroundColor: hasError ? '#ffebee' : '#e8f5e8',
                        padding: '15px',
                        borderRadius: '4px',
                        transition: 'all 0.3s ease',
                        border: hasError ? '2px solid #f44336' : '2px solid #4CAF50'
                    }">
                        动态style绑定演示 - 颜色、大小、背景都会变化
                    </div>
                </div>
                
                <div>
                    <strong>3. 组合绑定：</strong>
                    <div :class="computedClasses" :style="computedStyles" style="margin-top: 5px; padding: 15px; border-radius: 4px; transition: all 0.3s ease;">
                        计算属性控制的组合样式
                    </div>
                </div>
            </div>

            <!-- 当前状态显示 -->
            <div style="margin-top: 15px; padding: 10px; background-color: #e3f2fd; border-radius: 4px;">
                <strong>当前状态：</strong>
                <p>激活: {{ isActive }} | 错误: {{ hasError }} | 字体: {{ fontSize }}px | 主题: {{ theme }}</p>
                <p>应用的类: {{ [isActive ? 'active' : '', hasError ? 'error' : '', theme].filter(c => c).join(', ') }}</p>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    computed:{
        classObject(){
            return {
                active:this.isActive,
                'text-bold':this.isBold
            };
        },
        styleObject(){
            return{
                color: this.textColor,
                fontSize: this.fontSize+'px'
            }
        },
        computedClasses() {
            return {
                'active': this.isActive,
                'error': this.hasError,
                [this.theme]: true,
                'large-text': this.fontSize > 24
            };
        },
        computedStyles() {
            return {
                color: this.isActive ? '#4CAF50' : '#f44336',
                fontSize: this.fontSize + 'px',
                fontWeight: this.hasError ? 'bold' : 'normal',
                backgroundColor: this.theme === 'dark' ? '#333' : 
                                this.theme === 'colorful' ? '#ffeb3b' : '#fff',
                border: `2px solid ${this.isActive ? '#4CAF50' : '#f44336'}`,
                textShadow: this.theme === 'colorful' ? '1px 1px 2px rgba(0,0,0,0.3)' : 'none'
            };
        }
    },
    data() {
        return {
            isActive: false,
            hasError: false,
            fontSize: 18,
            theme: 'light',
            isBold : true,
            textColor:"red"
        }
    },
    methods: {
        toggleActive() {
            this.isActive = !this.isActive;
        },
        toggleError() {
            this.hasError = !this.hasError;
        }
    },
}
</script>

<style scoped>
.active {
    color: green;
    font-weight: bold;
}
.inactive {
    color: red;
}
.error {
    color: #f44336;
    background-color: #ffebee;
    border: 1px solid #f44336;
}
.light {
    background-color: #fff;
    color: #333;
}
.dark {
    background-color: #333;
    color: #fff;
}
.colorful {
    background: linear-gradient(45deg, #ff9800, #e91e63, #9c27b0);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.large-text {
    font-size: 1.2em;
    font-weight: bold;
}
</style>